<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ str }}</h4>
    <!--$event 是一个占位符，本质上是一个事件对象-->
    <button @click="test(6, $event)">测试</button>
    <button @click="change">转换</button>
    <!--等价于 <button @click="str = '哈哈' ">转换</button> change函数不用写了 -->
    <!--自定义事件-->
    <h4 v-show="toy">子给的参数toy: {{ toy }}</h4>
    <Child @sendToFather="xyz" />
    <!--给子组件 Child 绑定事件-->
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from "./Child.vue";
import { ref } from "vue";

let str = ref("你好");
let toy = ref("");

function test(a: number, b: Event) {
  console.log("test", a, b);
}

function change() {
  str.value = "哈哈";
}

function xyz(value: string) {
  console.log("xyz", value);
  toy.value = value;
}
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
.father button {
  margin-right: 5px;
}
</style>